<template>
    <div>

<h2>房型修改周考3</h2>
<table class="table">
    <tbody>
        <tr>
            <td>房型名称</td>
            <td>
                <input type="text" v-model="model.HouseTypeName">
            </td>
        </tr>

        <tr>
            <td>面积</td>
            <td>
                <input type="text" v-model="model.HouseArea">
            </td>
        </tr>

        <tr>
            <td>价格</td>
            <td>
                <input type="text" v-model="model.Price">
            </td>
        </tr>

        <tr>
            <td>是否有窗</td>
            <td>
                <input type="radio" v-model="model.IsWindows" name="Win" v-bind:value="1" >是
                <input type="radio" v-model="model.IsWindows" name="Win" v-bind:value="0" >否
            </td>
        </tr>

        <tr>
            <td>入住人数</td>
            <td>
                <select v-model="model.PeopleCount">
                    <option :value="1">1</option>
                    <option :value="2">2</option>
                    <option :value="3">3</option>
                    <option :value="4">4</option>
                    <option :value="5">5</option>
                </select>
            </td>
        </tr>

        <tr>
            <td>是否上架</td>
            <td>
                <input type="radio" v-model="model.State" name="state" v-bind:value="1" >上架
                <input type="radio" v-model="model.State" name="state" v-bind:value="0" >下架
            </td>
        </tr>

        <tr>
            <td>房型图片</td>
            <td>
                <input type="file" @change="changeImg">
                <img :src="model.Photo" alt="" width="100" height="100">
            </td>
        </tr>

      

        <tr>
            <td></td>
             <td><input type="button" value="修改" class="btn btn-success"   @click="ok"/>
            </td>
            
        </tr>
    </tbody>
</table>

</div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import { useRouter ,useRoute} from 'vue-router';
const router=useRouter();
const route=useRoute();

let model=reactive({
Id: route.query.Id,
  "HouseTypeName": '',
  "HouseArea": '',
  "Price": '',
  "IsWindows": 1,
  "PeopleCount": '',
  "State": 1,
  "Photo": '',
})


//1.上传图片
const changeImg = (e: any) => {
    //将文件转成FormData格式
    var obj = e.target.files[0];
    var f = new FormData();
    f.append('file', obj);
    //发送网络请求完成上传
    axios({
      url:'/api/Commons/UpoadImgs',
      method: 'post',
      data: f,
    })
      .then((res) => {
        console.log(res);
        //上传成功   1.成功的图片地址存储  2.预览图片
        model.Photo = 'https://localhost:7291' + res.data.data;
      })
      .catch((err) => {
        console.log(err);
      });
  };


//反填
onMounted(()=>{
getDate();

})



//反填
const getDate=()=>{

axios({
url:'/api/TestHouseType/TestHouseTypeAll',
method:'get',
params:{
    Id:route.query.Id,
}

})

.then((res)=>{
console.log(res);
model.HouseTypeName=res.data.HouseTypeName;
model.HouseArea=res.data.HouseArea;
model.Price=res.data.Price;
model.IsWindows=res.data.IsWindows;
model.PeopleCount=res.data.PeopleCount;
model.State=res.data.State;
model.Photo=res.data.Photo;
})

.catch((ree)=>{
console.log(ree);
})


}






  //修改
const ok=()=>{

axios({
url:'/api/TestHouseType/TestHouseTypeUpd',
method:'put',
data:model,
})

.then((res)=>{
console.log(res);
if(res.data>0){
    alert('修改成功');
    router.push('/testHouseList')
    return;
}
else{
    alert('修改失败');
    return;
}
})


.catch((ree)=>{
console.log(ree);
})


}





</script>

<style scoped>

</style>